<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4159149" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon haofont">&#xe821;</span>
                <div class="name">moon-clear-fill</div>
                <div class="code-name">&amp;#xe821;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe698;</span>
                <div class="name">eicon_train-line</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe6fd;</span>
                <div class="name">disc-fill</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe6f2;</span>
                <div class="name">signal-tower-fill</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe697;</span>
                <div class="name">search-2-line</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe6b2;</span>
                <div class="name">chat-1-fill</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe82d;</span>
                <div class="name">apps-fill</div>
                <div class="code-name">&amp;#xe82d;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe69a;</span>
                <div class="name">Home</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe6d6;</span>
                <div class="name">英文</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe6d7;</span>
                <div class="name">简体</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe6d8;</span>
                <div class="name">繁体</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe695;</span>
                <div class="name">aifadian-line</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe696;</span>
                <div class="name">账号</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe694;</span>
                <div class="name">作者</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe693;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe691;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe77d;</span>
                <div class="name">check-circle</div>
                <div class="code-name">&amp;#xe77d;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe6f7;</span>
                <div class="name">dashboard</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xeaff;</span>
                <div class="name">bullseye</div>
                <div class="code-name">&amp;#xeaff;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe690;</span>
                <div class="name">logo-moment</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xebf2;</span>
                <div class="name">leetcode</div>
                <div class="code-name">&amp;#xebf2;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe692;</span>
                <div class="name">gitlab</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe68a;</span>
                <div class="name">csdn</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe87f;</span>
                <div class="name">dribbble</div>
                <div class="code-name">&amp;#xe87f;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe880;</span>
                <div class="name">yuque</div>
                <div class="code-name">&amp;#xe880;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe73b;</span>
                <div class="name">linkedin</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe765;</span>
                <div class="name">youtube</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe68b;</span>
                <div class="name">Instagram</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xeca1;</span>
                <div class="name">slack</div>
                <div class="code-name">&amp;#xeca1;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe68c;</span>
                <div class="name">百度</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe7af;</span>
                <div class="name">discord-line</div>
                <div class="code-name">&amp;#xe7af;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe68d;</span>
                <div class="name">cnblogs</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe68e;</span>
                <div class="name">juejin</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xec22;</span>
                <div class="name">steam</div>
                <div class="code-name">&amp;#xec22;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xec25;</span>
                <div class="name">telegram</div>
                <div class="code-name">&amp;#xec25;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe68f;</span>
                <div class="name">toutiao</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe686;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe687;</span>
                <div class="name">豆瓣</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe688;</span>
                <div class="name">知乎</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe689;</span>
                <div class="name">微信公众号</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe684;</span>
                <div class="name">猜你喜欢</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe685;</span>
                <div class="name">eicon_map-2-line</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe833;</span>
                <div class="name">circle</div>
                <div class="code-name">&amp;#xe833;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe67a;</span>
                <div class="name">creative-commons-nd-line</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe67b;</span>
                <div class="name">creative-commons-by-line</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe67c;</span>
                <div class="name">creative-commons-nc-line</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe67d;</span>
                <div class="name">copyright-line</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe67e;</span>
                <div class="name">font</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe67f;</span>
                <div class="name">stopwatch</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe680;</span>
                <div class="name">file-lines</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe681;</span>
                <div class="name">square-poll-vertical</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe682;</span>
                <div class="name">universal-access</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe683;</span>
                <div class="name">hourglass-start</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe679;</span>
                <div class="name">通讯录07</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe600;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe601;</span>
                <div class="name">arrow-left</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe602;</span>
                <div class="name">dice</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe603;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe604;</span>
                <div class="name">cube</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe605;</span>
                <div class="name">circle-arrow-right</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe606;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe607;</span>
                <div class="name">book</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe608;</span>
                <div class="name">calendar-alt</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe609;</span>
                <div class="name">eye-outline</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe60a;</span>
                <div class="name">circle-half-stroke</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe60b;</span>
                <div class="name">arrow-up</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe60c;</span>
                <div class="name">file-word</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe60d;</span>
                <div class="name">fire</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe60e;</span>
                <div class="name">dove</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe60f;</span>
                <div class="name">gear</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe610;</span>
                <div class="name">inbox</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe611;</span>
                <div class="name">history</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe613;</span>
                <div class="name">message</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe614;</span>
                <div class="name">moon</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe615;</span>
                <div class="name">shapes</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe616;</span>
                <div class="name">shuffle</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe617;</span>
                <div class="name">language</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe618;</span>
                <div class="name">tags</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe619;</span>
                <div class="name">train</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe61a;</span>
                <div class="name">warning</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe61b;</span>
                <div class="name">circle-arrow-up-right-1</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe61c;</span>
                <div class="name">fish</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe61d;</span>
                <div class="name">envelope</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe61e;</span>
                <div class="name">music</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe61f;</span>
                <div class="name">fan</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe620;</span>
                <div class="name">heartbeat-bold</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe621;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe622;</span>
                <div class="name">chevron-left</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe623;</span>
                <div class="name">rocket</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe624;</span>
                <div class="name">lightbulb</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe625;</span>
                <div class="name">shoe-prints</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe626;</span>
                <div class="name">images</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe627;</span>
                <div class="name">box-archive</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe628;</span>
                <div class="name">artstation</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe629;</span>
                <div class="name">paper-plane</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe62a;</span>
                <div class="name">house-chimney</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe62c;</span>
                <div class="name">bars</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe62d;</span>
                <div class="name">arrows-left-right</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe62e;</span>
                <div class="name">book-open</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe62f;</span>
                <div class="name">list-ul</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe631;</span>
                <div class="name">comment-sms</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe632;</span>
                <div class="name">angles-right</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe633;</span>
                <div class="name">tag</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe634;</span>
                <div class="name">chevron-right</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe635;</span>
                <div class="name">radio</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe636;</span>
                <div class="name">forward</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe637;</span>
                <div class="name">window-restore</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe638;</span>
                <div class="name">backward</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe639;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe63a;</span>
                <div class="name">comment-medical</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe63b;</span>
                <div class="name">paste</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe63c;</span>
                <div class="name">arrow-rotate-right</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe63d;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe63e;</span>
                <div class="name">circle-xmark</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe63f;</span>
                <div class="name">angle-down</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe640;</span>
                <div class="name">chart-line</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe641;</span>
                <div class="name">pencil</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe642;</span>
                <div class="name">thumbtack</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe643;</span>
                <div class="name">location-dot</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe644;</span>
                <div class="name">fw-fire</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe645;</span>
                <div class="name">calendar-days</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe646;</span>
                <div class="name">angle-right</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe647;</span>
                <div class="name">dice-d20</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe648;</span>
                <div class="name">instagram</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe649;</span>
                <div class="name">xmark</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe64a;</span>
                <div class="name">spinner</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe64b;</span>
                <div class="name">bullhorn</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe64c;</span>
                <div class="name">stream</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe64d;</span>
                <div class="name">caret-left</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe64e;</span>
                <div class="name">folder-open</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe64f;</span>
                <div class="name">thumbs-up</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe650;</span>
                <div class="name">angle-double-down</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe651;</span>
                <div class="name">sign-out-alt</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe652;</span>
                <div class="name">angle-double-left</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe653;</span>
                <div class="name">angle-double-right</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe654;</span>
                <div class="name">angle-left</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe655;</span>
                <div class="name">fw-eye</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe656;</span>
                <div class="name">repeat</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe657;</span>
                <div class="name">shuffle</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe658;</span>
                <div class="name">arrows-rotate</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe659;</span>
                <div class="name">pause</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe65a;</span>
                <div class="name">heartbeat</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe65d;</span>
                <div class="name">heartbeat</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe65e;</span>
                <div class="name">rss</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe65f;</span>
                <div class="name">qq</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe660;</span>
                <div class="name">github</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe661;</span>
                <div class="name">bilibili</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe662;</span>
                <div class="name">paper-plane</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe663;</span>
                <div class="name">hashtag</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe664;</span>
                <div class="name">hand-heart-fill</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe665;</span>
                <div class="name">plant-fill</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe666;</span>
                <div class="name">qrcode</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe667;</span>
                <div class="name">weibo</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe668;</span>
                <div class="name">copyright</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe669;</span>
                <div class="name">bolt</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe66a;</span>
                <div class="name">circle-info</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe66b;</span>
                <div class="name">triangle-exclamation</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe66c;</span>
                <div class="name">circle-check</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe66d;</span>
                <div class="name">circle-minus</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe66e;</span>
                <div class="name">circle-plus</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe66f;</span>
                <div class="name">circle-dot</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe670;</span>
                <div class="name">scissors</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe671;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe672;</span>
                <div class="name">灯泡</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe673;</span>
                <div class="name">弹幕</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe674;</span>
                <div class="name">总览</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe675;</span>
                <div class="name">灵感</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe676;</span>
                <div class="name">三明治</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe677;</span>
                <div class="name">keyboard</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon haofont">&#xe678;</span>
                <div class="name">tiktok</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'haofont';
  src: url('iconfont.eot?t=1699854542133'); /* IE9 */
  src: url('iconfont.eot?t=1699854542133#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1699854542133') format('woff2'),
       url('iconfont.woff?t=1699854542133') format('woff'),
       url('iconfont.ttf?t=1699854542133') format('truetype'),
       url('iconfont.svg?t=1699854542133#haofont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.haofont {
  font-family: "haofont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="haofont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"haofont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon haofont hao-icon-moon-clear-fill"></span>
            <div class="name">
              moon-clear-fill
            </div>
            <div class="code-name">.hao-icon-moon-clear-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-eicon_train-line"></span>
            <div class="name">
              eicon_train-line
            </div>
            <div class="code-name">.hao-icon-eicon_train-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-disc-fill"></span>
            <div class="name">
              disc-fill
            </div>
            <div class="code-name">.hao-icon-disc-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-signal-tower-fill"></span>
            <div class="name">
              signal-tower-fill
            </div>
            <div class="code-name">.hao-icon-signal-tower-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-search--line"></span>
            <div class="name">
              search-2-line
            </div>
            <div class="code-name">.hao-icon-search--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-chat--fill"></span>
            <div class="name">
              chat-1-fill
            </div>
            <div class="code-name">.hao-icon-chat--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-apps-fill"></span>
            <div class="name">
              apps-fill
            </div>
            <div class="code-name">.hao-icon-apps-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-Home"></span>
            <div class="name">
              Home
            </div>
            <div class="code-name">.hao-icon-Home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-yingwen"></span>
            <div class="name">
              英文
            </div>
            <div class="code-name">.hao-icon-yingwen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-jianti"></span>
            <div class="name">
              简体
            </div>
            <div class="code-name">.hao-icon-jianti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-fanti"></span>
            <div class="name">
              繁体
            </div>
            <div class="code-name">.hao-icon-fanti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-aifadian-line"></span>
            <div class="name">
              aifadian-line
            </div>
            <div class="code-name">.hao-icon-aifadian-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-zhanghao1"></span>
            <div class="name">
              账号
            </div>
            <div class="code-name">.hao-icon-zhanghao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-zuozhe"></span>
            <div class="name">
              作者
            </div>
            <div class="code-name">.hao-icon-zuozhe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-weixin1"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.hao-icon-weixin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.hao-icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-check-circle"></span>
            <div class="name">
              check-circle
            </div>
            <div class="code-name">.hao-icon-check-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-dashboard"></span>
            <div class="name">
              dashboard
            </div>
            <div class="code-name">.hao-icon-dashboard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-bullseye"></span>
            <div class="name">
              bullseye
            </div>
            <div class="code-name">.hao-icon-bullseye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-logo-moment"></span>
            <div class="name">
              logo-moment
            </div>
            <div class="code-name">.hao-icon-logo-moment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-leetcode"></span>
            <div class="name">
              leetcode
            </div>
            <div class="code-name">.hao-icon-leetcode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-gitlab"></span>
            <div class="name">
              gitlab
            </div>
            <div class="code-name">.hao-icon-gitlab
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-csdn"></span>
            <div class="name">
              csdn
            </div>
            <div class="code-name">.hao-icon-csdn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-dribbble"></span>
            <div class="name">
              dribbble
            </div>
            <div class="code-name">.hao-icon-dribbble
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-yuque"></span>
            <div class="name">
              yuque
            </div>
            <div class="code-name">.hao-icon-yuque
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-linkedin"></span>
            <div class="name">
              linkedin
            </div>
            <div class="code-name">.hao-icon-linkedin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-youtube"></span>
            <div class="name">
              youtube
            </div>
            <div class="code-name">.hao-icon-youtube
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-Instagram"></span>
            <div class="name">
              Instagram
            </div>
            <div class="code-name">.hao-icon-Instagram
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-slack"></span>
            <div class="name">
              slack
            </div>
            <div class="code-name">.hao-icon-slack
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-baidu"></span>
            <div class="name">
              百度
            </div>
            <div class="code-name">.hao-icon-baidu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-discord-line"></span>
            <div class="name">
              discord-line
            </div>
            <div class="code-name">.hao-icon-discord-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-cnblogs"></span>
            <div class="name">
              cnblogs
            </div>
            <div class="code-name">.hao-icon-cnblogs
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-juejin"></span>
            <div class="name">
              juejin
            </div>
            <div class="code-name">.hao-icon-juejin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-steam"></span>
            <div class="name">
              steam
            </div>
            <div class="code-name">.hao-icon-steam
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-telegram"></span>
            <div class="name">
              telegram
            </div>
            <div class="code-name">.hao-icon-telegram
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-toutiao"></span>
            <div class="name">
              toutiao
            </div>
            <div class="code-name">.hao-icon-toutiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.hao-icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-douban"></span>
            <div class="name">
              豆瓣
            </div>
            <div class="code-name">.hao-icon-douban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-29"></span>
            <div class="name">
              知乎
            </div>
            <div class="code-name">.hao-icon-29
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-weixingongzhonghao"></span>
            <div class="name">
              微信公众号
            </div>
            <div class="code-name">.hao-icon-weixingongzhonghao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-cainixihuan"></span>
            <div class="name">
              猜你喜欢
            </div>
            <div class="code-name">.hao-icon-cainixihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-eicon_map-2-line1"></span>
            <div class="name">
              eicon_map-2-line
            </div>
            <div class="code-name">.hao-icon-eicon_map-2-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-yuan"></span>
            <div class="name">
              circle
            </div>
            <div class="code-name">.hao-icon-yuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-creative-commons-nd-line"></span>
            <div class="name">
              creative-commons-nd-line
            </div>
            <div class="code-name">.hao-icon-creative-commons-nd-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-creative-commons-by-line"></span>
            <div class="name">
              creative-commons-by-line
            </div>
            <div class="code-name">.hao-icon-creative-commons-by-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-creative-commons-nc-line"></span>
            <div class="name">
              creative-commons-nc-line
            </div>
            <div class="code-name">.hao-icon-creative-commons-nc-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-copyright-line"></span>
            <div class="name">
              copyright-line
            </div>
            <div class="code-name">.hao-icon-copyright-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-font"></span>
            <div class="name">
              font
            </div>
            <div class="code-name">.hao-icon-font
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-stopwatch"></span>
            <div class="name">
              stopwatch
            </div>
            <div class="code-name">.hao-icon-stopwatch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-file-lines"></span>
            <div class="name">
              file-lines
            </div>
            <div class="code-name">.hao-icon-file-lines
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-square-poll-vertical"></span>
            <div class="name">
              square-poll-vertical
            </div>
            <div class="code-name">.hao-icon-square-poll-vertical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-universal-access"></span>
            <div class="name">
              universal-access
            </div>
            <div class="code-name">.hao-icon-universal-access
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-hourglass-start"></span>
            <div class="name">
              hourglass-start
            </div>
            <div class="code-name">.hao-icon-hourglass-start
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-tongxunlu07"></span>
            <div class="name">
              通讯录07
            </div>
            <div class="code-name">.hao-icon-tongxunlu07
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-arrow-right"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.hao-icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-arrow-left"></span>
            <div class="name">
              arrow-left
            </div>
            <div class="code-name">.hao-icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-dice"></span>
            <div class="name">
              dice
            </div>
            <div class="code-name">.hao-icon-dice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.hao-icon-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-cube"></span>
            <div class="name">
              cube
            </div>
            <div class="code-name">.hao-icon-cube
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-circle-arrow-right"></span>
            <div class="name">
              circle-arrow-right
            </div>
            <div class="code-name">.hao-icon-circle-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.hao-icon-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-book"></span>
            <div class="name">
              book
            </div>
            <div class="code-name">.hao-icon-book
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-calendar-alt"></span>
            <div class="name">
              calendar-alt
            </div>
            <div class="code-name">.hao-icon-calendar-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-eye-outline"></span>
            <div class="name">
              eye-outline
            </div>
            <div class="code-name">.hao-icon-eye-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-circle-half-stroke"></span>
            <div class="name">
              circle-half-stroke
            </div>
            <div class="code-name">.hao-icon-circle-half-stroke
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-arrow-up"></span>
            <div class="name">
              arrow-up
            </div>
            <div class="code-name">.hao-icon-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-file-word"></span>
            <div class="name">
              file-word
            </div>
            <div class="code-name">.hao-icon-file-word
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-fire"></span>
            <div class="name">
              fire
            </div>
            <div class="code-name">.hao-icon-fire
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-dove"></span>
            <div class="name">
              dove
            </div>
            <div class="code-name">.hao-icon-dove
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-gear"></span>
            <div class="name">
              gear
            </div>
            <div class="code-name">.hao-icon-gear
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-inbox"></span>
            <div class="name">
              inbox
            </div>
            <div class="code-name">.hao-icon-inbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-history"></span>
            <div class="name">
              history
            </div>
            <div class="code-name">.hao-icon-history
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-message"></span>
            <div class="name">
              message
            </div>
            <div class="code-name">.hao-icon-message
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-moon"></span>
            <div class="name">
              moon
            </div>
            <div class="code-name">.hao-icon-moon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-shapes"></span>
            <div class="name">
              shapes
            </div>
            <div class="code-name">.hao-icon-shapes
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-shuffle"></span>
            <div class="name">
              shuffle
            </div>
            <div class="code-name">.hao-icon-shuffle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-language"></span>
            <div class="name">
              language
            </div>
            <div class="code-name">.hao-icon-language
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-tags"></span>
            <div class="name">
              tags
            </div>
            <div class="code-name">.hao-icon-tags
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-train"></span>
            <div class="name">
              train
            </div>
            <div class="code-name">.hao-icon-train
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.hao-icon-warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-circle-arrow-up-right-1"></span>
            <div class="name">
              circle-arrow-up-right-1
            </div>
            <div class="code-name">.hao-icon-circle-arrow-up-right-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-fish"></span>
            <div class="name">
              fish
            </div>
            <div class="code-name">.hao-icon-fish
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-envelope"></span>
            <div class="name">
              envelope
            </div>
            <div class="code-name">.hao-icon-envelope
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-music"></span>
            <div class="name">
              music
            </div>
            <div class="code-name">.hao-icon-music
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-fan"></span>
            <div class="name">
              fan
            </div>
            <div class="code-name">.hao-icon-fan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-heartbeat-bold"></span>
            <div class="name">
              heartbeat-bold
            </div>
            <div class="code-name">.hao-icon-heartbeat-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.hao-icon-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-chevron-left"></span>
            <div class="name">
              chevron-left
            </div>
            <div class="code-name">.hao-icon-chevron-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-rocket"></span>
            <div class="name">
              rocket
            </div>
            <div class="code-name">.hao-icon-rocket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-lightbulb"></span>
            <div class="name">
              lightbulb
            </div>
            <div class="code-name">.hao-icon-lightbulb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-shoe-prints"></span>
            <div class="name">
              shoe-prints
            </div>
            <div class="code-name">.hao-icon-shoe-prints
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-images"></span>
            <div class="name">
              images
            </div>
            <div class="code-name">.hao-icon-images
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-box-archive"></span>
            <div class="name">
              box-archive
            </div>
            <div class="code-name">.hao-icon-box-archive
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-artstation"></span>
            <div class="name">
              artstation
            </div>
            <div class="code-name">.hao-icon-artstation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-paper-plane"></span>
            <div class="name">
              paper-plane
            </div>
            <div class="code-name">.hao-icon-paper-plane
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-house-chimney"></span>
            <div class="name">
              house-chimney
            </div>
            <div class="code-name">.hao-icon-house-chimney
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-bars"></span>
            <div class="name">
              bars
            </div>
            <div class="code-name">.hao-icon-bars
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-arrows-left-right"></span>
            <div class="name">
              arrows-left-right
            </div>
            <div class="code-name">.hao-icon-arrows-left-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-book-open"></span>
            <div class="name">
              book-open
            </div>
            <div class="code-name">.hao-icon-book-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-list-ul"></span>
            <div class="name">
              list-ul
            </div>
            <div class="code-name">.hao-icon-list-ul
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-comment-sms"></span>
            <div class="name">
              comment-sms
            </div>
            <div class="code-name">.hao-icon-comment-sms
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-angles-right"></span>
            <div class="name">
              angles-right
            </div>
            <div class="code-name">.hao-icon-angles-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-tag"></span>
            <div class="name">
              tag
            </div>
            <div class="code-name">.hao-icon-tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-chevron-right"></span>
            <div class="name">
              chevron-right
            </div>
            <div class="code-name">.hao-icon-chevron-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-radio"></span>
            <div class="name">
              radio
            </div>
            <div class="code-name">.hao-icon-radio
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-forward"></span>
            <div class="name">
              forward
            </div>
            <div class="code-name">.hao-icon-forward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-window-restore"></span>
            <div class="name">
              window-restore
            </div>
            <div class="code-name">.hao-icon-window-restore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-backward"></span>
            <div class="name">
              backward
            </div>
            <div class="code-name">.hao-icon-backward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.hao-icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-comment-medical"></span>
            <div class="name">
              comment-medical
            </div>
            <div class="code-name">.hao-icon-comment-medical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-paste"></span>
            <div class="name">
              paste
            </div>
            <div class="code-name">.hao-icon-paste
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-arrow-rotate-right"></span>
            <div class="name">
              arrow-rotate-right
            </div>
            <div class="code-name">.hao-icon-arrow-rotate-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-play"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.hao-icon-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-circle-xmark"></span>
            <div class="name">
              circle-xmark
            </div>
            <div class="code-name">.hao-icon-circle-xmark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-angle-down"></span>
            <div class="name">
              angle-down
            </div>
            <div class="code-name">.hao-icon-angle-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-chart-line"></span>
            <div class="name">
              chart-line
            </div>
            <div class="code-name">.hao-icon-chart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-pencil"></span>
            <div class="name">
              pencil
            </div>
            <div class="code-name">.hao-icon-pencil
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-thumbtack"></span>
            <div class="name">
              thumbtack
            </div>
            <div class="code-name">.hao-icon-thumbtack
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-location-dot"></span>
            <div class="name">
              location-dot
            </div>
            <div class="code-name">.hao-icon-location-dot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-fw-fire"></span>
            <div class="name">
              fw-fire
            </div>
            <div class="code-name">.hao-icon-fw-fire
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-calendar-days"></span>
            <div class="name">
              calendar-days
            </div>
            <div class="code-name">.hao-icon-calendar-days
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-angle-right"></span>
            <div class="name">
              angle-right
            </div>
            <div class="code-name">.hao-icon-angle-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-dice-d20"></span>
            <div class="name">
              dice-d20
            </div>
            <div class="code-name">.hao-icon-dice-d20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-instagram"></span>
            <div class="name">
              instagram
            </div>
            <div class="code-name">.hao-icon-instagram
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-xmark"></span>
            <div class="name">
              xmark
            </div>
            <div class="code-name">.hao-icon-xmark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-spinner"></span>
            <div class="name">
              spinner
            </div>
            <div class="code-name">.hao-icon-spinner
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-bullhorn"></span>
            <div class="name">
              bullhorn
            </div>
            <div class="code-name">.hao-icon-bullhorn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-stream"></span>
            <div class="name">
              stream
            </div>
            <div class="code-name">.hao-icon-stream
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-caret-left"></span>
            <div class="name">
              caret-left
            </div>
            <div class="code-name">.hao-icon-caret-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-folder-open"></span>
            <div class="name">
              folder-open
            </div>
            <div class="code-name">.hao-icon-folder-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-thumbs-up"></span>
            <div class="name">
              thumbs-up
            </div>
            <div class="code-name">.hao-icon-thumbs-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-angle-double-down"></span>
            <div class="name">
              angle-double-down
            </div>
            <div class="code-name">.hao-icon-angle-double-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-sign-out-alt"></span>
            <div class="name">
              sign-out-alt
            </div>
            <div class="code-name">.hao-icon-sign-out-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-angle-double-left"></span>
            <div class="name">
              angle-double-left
            </div>
            <div class="code-name">.hao-icon-angle-double-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-angle-double-right"></span>
            <div class="name">
              angle-double-right
            </div>
            <div class="code-name">.hao-icon-angle-double-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-angle-left"></span>
            <div class="name">
              angle-left
            </div>
            <div class="code-name">.hao-icon-angle-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-fw-eye"></span>
            <div class="name">
              fw-eye
            </div>
            <div class="code-name">.hao-icon-fw-eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-repeat"></span>
            <div class="name">
              repeat
            </div>
            <div class="code-name">.hao-icon-repeat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-shuffle1"></span>
            <div class="name">
              shuffle
            </div>
            <div class="code-name">.hao-icon-shuffle1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-arrows-rotate"></span>
            <div class="name">
              arrows-rotate
            </div>
            <div class="code-name">.hao-icon-arrows-rotate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-pause"></span>
            <div class="name">
              pause
            </div>
            <div class="code-name">.hao-icon-pause
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-heartbeat"></span>
            <div class="name">
              heartbeat
            </div>
            <div class="code-name">.hao-icon-heartbeat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-heartbeat1"></span>
            <div class="name">
              heartbeat
            </div>
            <div class="code-name">.hao-icon-heartbeat1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-rss"></span>
            <div class="name">
              rss
            </div>
            <div class="code-name">.hao-icon-rss
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-qq"></span>
            <div class="name">
              qq
            </div>
            <div class="code-name">.hao-icon-qq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-github"></span>
            <div class="name">
              github
            </div>
            <div class="code-name">.hao-icon-github
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-bilibili"></span>
            <div class="name">
              bilibili
            </div>
            <div class="code-name">.hao-icon-bilibili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-paper-plane1"></span>
            <div class="name">
              paper-plane
            </div>
            <div class="code-name">.hao-icon-paper-plane1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-hashtag"></span>
            <div class="name">
              hashtag
            </div>
            <div class="code-name">.hao-icon-hashtag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-hand-heart-fill"></span>
            <div class="name">
              hand-heart-fill
            </div>
            <div class="code-name">.hao-icon-hand-heart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-plant-fill"></span>
            <div class="name">
              plant-fill
            </div>
            <div class="code-name">.hao-icon-plant-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-qrcode"></span>
            <div class="name">
              qrcode
            </div>
            <div class="code-name">.hao-icon-qrcode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-weibo"></span>
            <div class="name">
              weibo
            </div>
            <div class="code-name">.hao-icon-weibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-copyright"></span>
            <div class="name">
              copyright
            </div>
            <div class="code-name">.hao-icon-copyright
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-bolt"></span>
            <div class="name">
              bolt
            </div>
            <div class="code-name">.hao-icon-bolt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-circle-info"></span>
            <div class="name">
              circle-info
            </div>
            <div class="code-name">.hao-icon-circle-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-triangle-exclamation"></span>
            <div class="name">
              triangle-exclamation
            </div>
            <div class="code-name">.hao-icon-triangle-exclamation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-circle-check"></span>
            <div class="name">
              circle-check
            </div>
            <div class="code-name">.hao-icon-circle-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-circle-minus"></span>
            <div class="name">
              circle-minus
            </div>
            <div class="code-name">.hao-icon-circle-minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-circle-plus"></span>
            <div class="name">
              circle-plus
            </div>
            <div class="code-name">.hao-icon-circle-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-circle-dot"></span>
            <div class="name">
              circle-dot
            </div>
            <div class="code-name">.hao-icon-circle-dot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-scissors"></span>
            <div class="name">
              scissors
            </div>
            <div class="code-name">.hao-icon-scissors
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.hao-icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-dengpao"></span>
            <div class="name">
              灯泡
            </div>
            <div class="code-name">.hao-icon-dengpao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-danmu"></span>
            <div class="name">
              弹幕
            </div>
            <div class="code-name">.hao-icon-danmu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-zonglan"></span>
            <div class="name">
              总览
            </div>
            <div class="code-name">.hao-icon-zonglan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-linggan"></span>
            <div class="name">
              灵感
            </div>
            <div class="code-name">.hao-icon-linggan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-sanmingzhi"></span>
            <div class="name">
              三明治
            </div>
            <div class="code-name">.hao-icon-sanmingzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-keyboard"></span>
            <div class="name">
              keyboard
            </div>
            <div class="code-name">.hao-icon-keyboard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon haofont hao-icon-tiktok"></span>
            <div class="name">
              tiktok
            </div>
            <div class="code-name">.hao-icon-tiktok
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="haofont hao-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            haofont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-moon-clear-fill"></use>
                </svg>
                <div class="name">moon-clear-fill</div>
                <div class="code-name">#hao-icon-moon-clear-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-eicon_train-line"></use>
                </svg>
                <div class="name">eicon_train-line</div>
                <div class="code-name">#hao-icon-eicon_train-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-disc-fill"></use>
                </svg>
                <div class="name">disc-fill</div>
                <div class="code-name">#hao-icon-disc-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-signal-tower-fill"></use>
                </svg>
                <div class="name">signal-tower-fill</div>
                <div class="code-name">#hao-icon-signal-tower-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-search--line"></use>
                </svg>
                <div class="name">search-2-line</div>
                <div class="code-name">#hao-icon-search--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-chat--fill"></use>
                </svg>
                <div class="name">chat-1-fill</div>
                <div class="code-name">#hao-icon-chat--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-apps-fill"></use>
                </svg>
                <div class="name">apps-fill</div>
                <div class="code-name">#hao-icon-apps-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-Home"></use>
                </svg>
                <div class="name">Home</div>
                <div class="code-name">#hao-icon-Home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-yingwen"></use>
                </svg>
                <div class="name">英文</div>
                <div class="code-name">#hao-icon-yingwen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-jianti"></use>
                </svg>
                <div class="name">简体</div>
                <div class="code-name">#hao-icon-jianti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-fanti"></use>
                </svg>
                <div class="name">繁体</div>
                <div class="code-name">#hao-icon-fanti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-aifadian-line"></use>
                </svg>
                <div class="name">aifadian-line</div>
                <div class="code-name">#hao-icon-aifadian-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-zhanghao1"></use>
                </svg>
                <div class="name">账号</div>
                <div class="code-name">#hao-icon-zhanghao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-zuozhe"></use>
                </svg>
                <div class="name">作者</div>
                <div class="code-name">#hao-icon-zuozhe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-weixin1"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#hao-icon-weixin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#hao-icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-check-circle"></use>
                </svg>
                <div class="name">check-circle</div>
                <div class="code-name">#hao-icon-check-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-dashboard"></use>
                </svg>
                <div class="name">dashboard</div>
                <div class="code-name">#hao-icon-dashboard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-bullseye"></use>
                </svg>
                <div class="name">bullseye</div>
                <div class="code-name">#hao-icon-bullseye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-logo-moment"></use>
                </svg>
                <div class="name">logo-moment</div>
                <div class="code-name">#hao-icon-logo-moment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-leetcode"></use>
                </svg>
                <div class="name">leetcode</div>
                <div class="code-name">#hao-icon-leetcode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-gitlab"></use>
                </svg>
                <div class="name">gitlab</div>
                <div class="code-name">#hao-icon-gitlab</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-csdn"></use>
                </svg>
                <div class="name">csdn</div>
                <div class="code-name">#hao-icon-csdn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-dribbble"></use>
                </svg>
                <div class="name">dribbble</div>
                <div class="code-name">#hao-icon-dribbble</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-yuque"></use>
                </svg>
                <div class="name">yuque</div>
                <div class="code-name">#hao-icon-yuque</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-linkedin"></use>
                </svg>
                <div class="name">linkedin</div>
                <div class="code-name">#hao-icon-linkedin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-youtube"></use>
                </svg>
                <div class="name">youtube</div>
                <div class="code-name">#hao-icon-youtube</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-Instagram"></use>
                </svg>
                <div class="name">Instagram</div>
                <div class="code-name">#hao-icon-Instagram</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-slack"></use>
                </svg>
                <div class="name">slack</div>
                <div class="code-name">#hao-icon-slack</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-baidu"></use>
                </svg>
                <div class="name">百度</div>
                <div class="code-name">#hao-icon-baidu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-discord-line"></use>
                </svg>
                <div class="name">discord-line</div>
                <div class="code-name">#hao-icon-discord-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-cnblogs"></use>
                </svg>
                <div class="name">cnblogs</div>
                <div class="code-name">#hao-icon-cnblogs</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-juejin"></use>
                </svg>
                <div class="name">juejin</div>
                <div class="code-name">#hao-icon-juejin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-steam"></use>
                </svg>
                <div class="name">steam</div>
                <div class="code-name">#hao-icon-steam</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-telegram"></use>
                </svg>
                <div class="name">telegram</div>
                <div class="code-name">#hao-icon-telegram</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-toutiao"></use>
                </svg>
                <div class="name">toutiao</div>
                <div class="code-name">#hao-icon-toutiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#hao-icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-douban"></use>
                </svg>
                <div class="name">豆瓣</div>
                <div class="code-name">#hao-icon-douban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-29"></use>
                </svg>
                <div class="name">知乎</div>
                <div class="code-name">#hao-icon-29</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-weixingongzhonghao"></use>
                </svg>
                <div class="name">微信公众号</div>
                <div class="code-name">#hao-icon-weixingongzhonghao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-cainixihuan"></use>
                </svg>
                <div class="name">猜你喜欢</div>
                <div class="code-name">#hao-icon-cainixihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-eicon_map-2-line1"></use>
                </svg>
                <div class="name">eicon_map-2-line</div>
                <div class="code-name">#hao-icon-eicon_map-2-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-yuan"></use>
                </svg>
                <div class="name">circle</div>
                <div class="code-name">#hao-icon-yuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-creative-commons-nd-line"></use>
                </svg>
                <div class="name">creative-commons-nd-line</div>
                <div class="code-name">#hao-icon-creative-commons-nd-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-creative-commons-by-line"></use>
                </svg>
                <div class="name">creative-commons-by-line</div>
                <div class="code-name">#hao-icon-creative-commons-by-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-creative-commons-nc-line"></use>
                </svg>
                <div class="name">creative-commons-nc-line</div>
                <div class="code-name">#hao-icon-creative-commons-nc-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-copyright-line"></use>
                </svg>
                <div class="name">copyright-line</div>
                <div class="code-name">#hao-icon-copyright-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-font"></use>
                </svg>
                <div class="name">font</div>
                <div class="code-name">#hao-icon-font</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-stopwatch"></use>
                </svg>
                <div class="name">stopwatch</div>
                <div class="code-name">#hao-icon-stopwatch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-file-lines"></use>
                </svg>
                <div class="name">file-lines</div>
                <div class="code-name">#hao-icon-file-lines</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-square-poll-vertical"></use>
                </svg>
                <div class="name">square-poll-vertical</div>
                <div class="code-name">#hao-icon-square-poll-vertical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-universal-access"></use>
                </svg>
                <div class="name">universal-access</div>
                <div class="code-name">#hao-icon-universal-access</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-hourglass-start"></use>
                </svg>
                <div class="name">hourglass-start</div>
                <div class="code-name">#hao-icon-hourglass-start</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-tongxunlu07"></use>
                </svg>
                <div class="name">通讯录07</div>
                <div class="code-name">#hao-icon-tongxunlu07</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-arrow-right"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#hao-icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-arrow-left"></use>
                </svg>
                <div class="name">arrow-left</div>
                <div class="code-name">#hao-icon-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-dice"></use>
                </svg>
                <div class="name">dice</div>
                <div class="code-name">#hao-icon-dice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-copy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#hao-icon-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-cube"></use>
                </svg>
                <div class="name">cube</div>
                <div class="code-name">#hao-icon-cube</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-circle-arrow-right"></use>
                </svg>
                <div class="name">circle-arrow-right</div>
                <div class="code-name">#hao-icon-circle-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#hao-icon-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-book"></use>
                </svg>
                <div class="name">book</div>
                <div class="code-name">#hao-icon-book</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-calendar-alt"></use>
                </svg>
                <div class="name">calendar-alt</div>
                <div class="code-name">#hao-icon-calendar-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-eye-outline"></use>
                </svg>
                <div class="name">eye-outline</div>
                <div class="code-name">#hao-icon-eye-outline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-circle-half-stroke"></use>
                </svg>
                <div class="name">circle-half-stroke</div>
                <div class="code-name">#hao-icon-circle-half-stroke</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-arrow-up"></use>
                </svg>
                <div class="name">arrow-up</div>
                <div class="code-name">#hao-icon-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-file-word"></use>
                </svg>
                <div class="name">file-word</div>
                <div class="code-name">#hao-icon-file-word</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-fire"></use>
                </svg>
                <div class="name">fire</div>
                <div class="code-name">#hao-icon-fire</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-dove"></use>
                </svg>
                <div class="name">dove</div>
                <div class="code-name">#hao-icon-dove</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-gear"></use>
                </svg>
                <div class="name">gear</div>
                <div class="code-name">#hao-icon-gear</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-inbox"></use>
                </svg>
                <div class="name">inbox</div>
                <div class="code-name">#hao-icon-inbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-history"></use>
                </svg>
                <div class="name">history</div>
                <div class="code-name">#hao-icon-history</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-message"></use>
                </svg>
                <div class="name">message</div>
                <div class="code-name">#hao-icon-message</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-moon"></use>
                </svg>
                <div class="name">moon</div>
                <div class="code-name">#hao-icon-moon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-shapes"></use>
                </svg>
                <div class="name">shapes</div>
                <div class="code-name">#hao-icon-shapes</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-shuffle"></use>
                </svg>
                <div class="name">shuffle</div>
                <div class="code-name">#hao-icon-shuffle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-language"></use>
                </svg>
                <div class="name">language</div>
                <div class="code-name">#hao-icon-language</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-tags"></use>
                </svg>
                <div class="name">tags</div>
                <div class="code-name">#hao-icon-tags</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-train"></use>
                </svg>
                <div class="name">train</div>
                <div class="code-name">#hao-icon-train</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-warning"></use>
                </svg>
                <div class="name">warning</div>
                <div class="code-name">#hao-icon-warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-circle-arrow-up-right-1"></use>
                </svg>
                <div class="name">circle-arrow-up-right-1</div>
                <div class="code-name">#hao-icon-circle-arrow-up-right-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-fish"></use>
                </svg>
                <div class="name">fish</div>
                <div class="code-name">#hao-icon-fish</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-envelope"></use>
                </svg>
                <div class="name">envelope</div>
                <div class="code-name">#hao-icon-envelope</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-music"></use>
                </svg>
                <div class="name">music</div>
                <div class="code-name">#hao-icon-music</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-fan"></use>
                </svg>
                <div class="name">fan</div>
                <div class="code-name">#hao-icon-fan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-heartbeat-bold"></use>
                </svg>
                <div class="name">heartbeat-bold</div>
                <div class="code-name">#hao-icon-heartbeat-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#hao-icon-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-chevron-left"></use>
                </svg>
                <div class="name">chevron-left</div>
                <div class="code-name">#hao-icon-chevron-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-rocket"></use>
                </svg>
                <div class="name">rocket</div>
                <div class="code-name">#hao-icon-rocket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-lightbulb"></use>
                </svg>
                <div class="name">lightbulb</div>
                <div class="code-name">#hao-icon-lightbulb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-shoe-prints"></use>
                </svg>
                <div class="name">shoe-prints</div>
                <div class="code-name">#hao-icon-shoe-prints</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-images"></use>
                </svg>
                <div class="name">images</div>
                <div class="code-name">#hao-icon-images</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-box-archive"></use>
                </svg>
                <div class="name">box-archive</div>
                <div class="code-name">#hao-icon-box-archive</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-artstation"></use>
                </svg>
                <div class="name">artstation</div>
                <div class="code-name">#hao-icon-artstation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-paper-plane"></use>
                </svg>
                <div class="name">paper-plane</div>
                <div class="code-name">#hao-icon-paper-plane</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-house-chimney"></use>
                </svg>
                <div class="name">house-chimney</div>
                <div class="code-name">#hao-icon-house-chimney</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-bars"></use>
                </svg>
                <div class="name">bars</div>
                <div class="code-name">#hao-icon-bars</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-arrows-left-right"></use>
                </svg>
                <div class="name">arrows-left-right</div>
                <div class="code-name">#hao-icon-arrows-left-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-book-open"></use>
                </svg>
                <div class="name">book-open</div>
                <div class="code-name">#hao-icon-book-open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-list-ul"></use>
                </svg>
                <div class="name">list-ul</div>
                <div class="code-name">#hao-icon-list-ul</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-comment-sms"></use>
                </svg>
                <div class="name">comment-sms</div>
                <div class="code-name">#hao-icon-comment-sms</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-angles-right"></use>
                </svg>
                <div class="name">angles-right</div>
                <div class="code-name">#hao-icon-angles-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-tag"></use>
                </svg>
                <div class="name">tag</div>
                <div class="code-name">#hao-icon-tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-chevron-right"></use>
                </svg>
                <div class="name">chevron-right</div>
                <div class="code-name">#hao-icon-chevron-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-radio"></use>
                </svg>
                <div class="name">radio</div>
                <div class="code-name">#hao-icon-radio</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-forward"></use>
                </svg>
                <div class="name">forward</div>
                <div class="code-name">#hao-icon-forward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-window-restore"></use>
                </svg>
                <div class="name">window-restore</div>
                <div class="code-name">#hao-icon-window-restore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-backward"></use>
                </svg>
                <div class="name">backward</div>
                <div class="code-name">#hao-icon-backward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#hao-icon-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-comment-medical"></use>
                </svg>
                <div class="name">comment-medical</div>
                <div class="code-name">#hao-icon-comment-medical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-paste"></use>
                </svg>
                <div class="name">paste</div>
                <div class="code-name">#hao-icon-paste</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-arrow-rotate-right"></use>
                </svg>
                <div class="name">arrow-rotate-right</div>
                <div class="code-name">#hao-icon-arrow-rotate-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-play"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#hao-icon-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-circle-xmark"></use>
                </svg>
                <div class="name">circle-xmark</div>
                <div class="code-name">#hao-icon-circle-xmark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-angle-down"></use>
                </svg>
                <div class="name">angle-down</div>
                <div class="code-name">#hao-icon-angle-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-chart-line"></use>
                </svg>
                <div class="name">chart-line</div>
                <div class="code-name">#hao-icon-chart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-pencil"></use>
                </svg>
                <div class="name">pencil</div>
                <div class="code-name">#hao-icon-pencil</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-thumbtack"></use>
                </svg>
                <div class="name">thumbtack</div>
                <div class="code-name">#hao-icon-thumbtack</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-location-dot"></use>
                </svg>
                <div class="name">location-dot</div>
                <div class="code-name">#hao-icon-location-dot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-fw-fire"></use>
                </svg>
                <div class="name">fw-fire</div>
                <div class="code-name">#hao-icon-fw-fire</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-calendar-days"></use>
                </svg>
                <div class="name">calendar-days</div>
                <div class="code-name">#hao-icon-calendar-days</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-angle-right"></use>
                </svg>
                <div class="name">angle-right</div>
                <div class="code-name">#hao-icon-angle-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-dice-d20"></use>
                </svg>
                <div class="name">dice-d20</div>
                <div class="code-name">#hao-icon-dice-d20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-instagram"></use>
                </svg>
                <div class="name">instagram</div>
                <div class="code-name">#hao-icon-instagram</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-xmark"></use>
                </svg>
                <div class="name">xmark</div>
                <div class="code-name">#hao-icon-xmark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-spinner"></use>
                </svg>
                <div class="name">spinner</div>
                <div class="code-name">#hao-icon-spinner</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-bullhorn"></use>
                </svg>
                <div class="name">bullhorn</div>
                <div class="code-name">#hao-icon-bullhorn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-stream"></use>
                </svg>
                <div class="name">stream</div>
                <div class="code-name">#hao-icon-stream</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-caret-left"></use>
                </svg>
                <div class="name">caret-left</div>
                <div class="code-name">#hao-icon-caret-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-folder-open"></use>
                </svg>
                <div class="name">folder-open</div>
                <div class="code-name">#hao-icon-folder-open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-thumbs-up"></use>
                </svg>
                <div class="name">thumbs-up</div>
                <div class="code-name">#hao-icon-thumbs-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-angle-double-down"></use>
                </svg>
                <div class="name">angle-double-down</div>
                <div class="code-name">#hao-icon-angle-double-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-sign-out-alt"></use>
                </svg>
                <div class="name">sign-out-alt</div>
                <div class="code-name">#hao-icon-sign-out-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-angle-double-left"></use>
                </svg>
                <div class="name">angle-double-left</div>
                <div class="code-name">#hao-icon-angle-double-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-angle-double-right"></use>
                </svg>
                <div class="name">angle-double-right</div>
                <div class="code-name">#hao-icon-angle-double-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-angle-left"></use>
                </svg>
                <div class="name">angle-left</div>
                <div class="code-name">#hao-icon-angle-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-fw-eye"></use>
                </svg>
                <div class="name">fw-eye</div>
                <div class="code-name">#hao-icon-fw-eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-repeat"></use>
                </svg>
                <div class="name">repeat</div>
                <div class="code-name">#hao-icon-repeat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-shuffle1"></use>
                </svg>
                <div class="name">shuffle</div>
                <div class="code-name">#hao-icon-shuffle1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-arrows-rotate"></use>
                </svg>
                <div class="name">arrows-rotate</div>
                <div class="code-name">#hao-icon-arrows-rotate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-pause"></use>
                </svg>
                <div class="name">pause</div>
                <div class="code-name">#hao-icon-pause</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-heartbeat"></use>
                </svg>
                <div class="name">heartbeat</div>
                <div class="code-name">#hao-icon-heartbeat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-heartbeat1"></use>
                </svg>
                <div class="name">heartbeat</div>
                <div class="code-name">#hao-icon-heartbeat1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-rss"></use>
                </svg>
                <div class="name">rss</div>
                <div class="code-name">#hao-icon-rss</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-qq"></use>
                </svg>
                <div class="name">qq</div>
                <div class="code-name">#hao-icon-qq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-github"></use>
                </svg>
                <div class="name">github</div>
                <div class="code-name">#hao-icon-github</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-bilibili"></use>
                </svg>
                <div class="name">bilibili</div>
                <div class="code-name">#hao-icon-bilibili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-paper-plane1"></use>
                </svg>
                <div class="name">paper-plane</div>
                <div class="code-name">#hao-icon-paper-plane1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-hashtag"></use>
                </svg>
                <div class="name">hashtag</div>
                <div class="code-name">#hao-icon-hashtag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-hand-heart-fill"></use>
                </svg>
                <div class="name">hand-heart-fill</div>
                <div class="code-name">#hao-icon-hand-heart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-plant-fill"></use>
                </svg>
                <div class="name">plant-fill</div>
                <div class="code-name">#hao-icon-plant-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-qrcode"></use>
                </svg>
                <div class="name">qrcode</div>
                <div class="code-name">#hao-icon-qrcode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-weibo"></use>
                </svg>
                <div class="name">weibo</div>
                <div class="code-name">#hao-icon-weibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-copyright"></use>
                </svg>
                <div class="name">copyright</div>
                <div class="code-name">#hao-icon-copyright</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-bolt"></use>
                </svg>
                <div class="name">bolt</div>
                <div class="code-name">#hao-icon-bolt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-circle-info"></use>
                </svg>
                <div class="name">circle-info</div>
                <div class="code-name">#hao-icon-circle-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-triangle-exclamation"></use>
                </svg>
                <div class="name">triangle-exclamation</div>
                <div class="code-name">#hao-icon-triangle-exclamation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-circle-check"></use>
                </svg>
                <div class="name">circle-check</div>
                <div class="code-name">#hao-icon-circle-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-circle-minus"></use>
                </svg>
                <div class="name">circle-minus</div>
                <div class="code-name">#hao-icon-circle-minus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-circle-plus"></use>
                </svg>
                <div class="name">circle-plus</div>
                <div class="code-name">#hao-icon-circle-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-circle-dot"></use>
                </svg>
                <div class="name">circle-dot</div>
                <div class="code-name">#hao-icon-circle-dot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-scissors"></use>
                </svg>
                <div class="name">scissors</div>
                <div class="code-name">#hao-icon-scissors</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-arrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#hao-icon-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-dengpao"></use>
                </svg>
                <div class="name">灯泡</div>
                <div class="code-name">#hao-icon-dengpao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-danmu"></use>
                </svg>
                <div class="name">弹幕</div>
                <div class="code-name">#hao-icon-danmu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-zonglan"></use>
                </svg>
                <div class="name">总览</div>
                <div class="code-name">#hao-icon-zonglan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-linggan"></use>
                </svg>
                <div class="name">灵感</div>
                <div class="code-name">#hao-icon-linggan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-sanmingzhi"></use>
                </svg>
                <div class="name">三明治</div>
                <div class="code-name">#hao-icon-sanmingzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-keyboard"></use>
                </svg>
                <div class="name">keyboard</div>
                <div class="code-name">#hao-icon-keyboard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hao-icon-tiktok"></use>
                </svg>
                <div class="name">tiktok</div>
                <div class="code-name">#hao-icon-tiktok</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
